﻿@using Model.WeiXin.DTO
@using Model.WXshopBuiness.Enum
@using Model.WXshopBuiness;
@using Xproject.Util
@{
    string Domain = CommonHelper.GetAppSettings("Domain");
    Layout = "~/Views/Shared/_ShopLayout.cshtml";
    ZXUserInfoModel basicinfo = (ZXUserInfoModel)ViewBag.basicInfo;
    string zxUserId = (string)ViewBag.zxUserId;
    ViewBag.Title = "我的足迹";
}
 
   
    <style>
        body {
            background: #5f3b8e;
        }

        .item img {
            width: 100%;
            height: 180px;
        }

        .carousel-inner > .item > a > img {
            display: block;
            max-width: 100%;
            line-height: 1;
        }

        .textover {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 1.6rem;
        }

        .divmoney {
            color: #fe6e12;
            font-size: 1.457em;
            display: block;
            font-family: '微软雅黑';
            float: left;
        }

        .divqisong {
            display: block;
            margin-top: 1rem;
            margin-left: 7rem;
            font-size: 0.857em;
        }

        .bianjie {
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }

        .browserHistory {
            background: #fff;
            margin-bottom: 5.571em;
        }
        .personinfo {
            float: left;
            margin-left: 0.5rem;
            margin-top: 0.5rem;
            color: white;
        }

            .personinfo p {
                font-size: 1.2em;
            }
    </style>
    
    <div class="zhang">
        <div class="container">
            <div class="xiao">
                <a href="#"><span class="iconfont icon-xiaoxi"><i></i></span></a>
                <a href="#"><span class="iconfont icon-iconfontshezhi"></span></a>
            </div>
            <div class="tou_x">
                <a href="#">
                    <div style="height: 50px;width: 50px;float: left;margin-top: :4px;padding-top: 10px;">
                        <img class="iconfont icon-touxiang" src="@basicinfo.HeadUrl" style="width:50px;height:50px;border-radius: 25px;" />
                    </div>
                </a>
                <div class="personinfo">
                    <p style="margin-bottom:2px;">@basicinfo.NickName</p>
                    <p style="margin-bottom:2px;">用户编码：@basicinfo.UserCode</p>
                    <p style="margin-bottom:2px;">手机号：@basicinfo.Mobile</p>
                </div>
            </div>
        </div>
    </div>
    <div id="wrapper">
        <div id="scroller">
            <div id="pullDown">
                <span class="pullDownIcon"></span>
                <span class="pullDownLabel">下拉刷新...</span>
            </div>

            <div class="browserHistory " id="thelist" style="margin-bottom:0px;margin-top: 2.8rem;">
            </div>
            <div id="pullUp" style="margin-top:0px">
                <span class="pullUpIcon"></span>
                <span class="pullUpLabel">上拉加载更多...</span>
            </div>
        </div>
    </div>
    
    
    <script type="text/javascript">

            var myScroll,
                pullDownEl,
                pullDownOffset,
                pullUpEl,
                pullUpOffset;

            //todo 自己定义的变量
            var userDataSum,//存储数据的变量
                addNum = 0,
                stepLength = 7,//每次加载的步长
                ajaxIndex = 1,
                sumL = 0;//数据的长度
            /**
             *  刷新滚动区域的滚动条的位置（此方法在添加数据后调用）
             **/
            function refreshScrollBar() {
                console.log("刷新滚动条");
                setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
                    myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
                }, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
            }

            function pullDownAction() {
                console.log("下拉");

                setTimeout(function () {
                    (function reloadPage() {
                        if (GetQueryString("_rf")) {
                            window.location.href = window.location.href.replace(GetQueryString("_rf"), Math.random());
                        } else {
                            window.location.href = window.location.href + (window.location.href.indexOf("?") > -1 ? "&" : "?") + "_rf=" + Math.random();
                        }
                    })();
                    myScroll.refresh();
                    console.log($("#product").height())
                }, 1000);
            }
            //初始化数据
            function pullUpAction() {
                console.log("上拉");

                setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!

                    getData(ajaxIndex, stepLength);
                    myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
                }, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
            }

            function loaded() {
                pullDownEl = document.getElementById('pullDown');
                pullDownOffset = pullDownEl.offsetHeight;
                pullUpEl = document.getElementById('pullUp');
                pullUpOffset = pullUpEl.offsetHeight;
                myScroll = new iScroll('wrapper', {
                    useTransition: true,
                    topOffset: pullDownOffset,
                    onRefresh: function () {
                        if (pullDownEl.className.match('loading')) {
                            pullDownEl.className = '';
                            pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                        } else if (pullUpEl.className.match('loading')) {
                            pullUpEl.className = '';
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                        }
                    },
                    onScrollMove: function () {
                        if (this.y > 5 && !pullDownEl.className.match('flip')) {
                            pullDownEl.className = 'flip';
                            pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
                            this.minScrollY = 0;
                        } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                            pullDownEl.className = '';
                            pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                            this.minScrollY = -pullDownOffset;
                        } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                            pullUpEl.className = 'flip';
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
                            this.maxScrollY = this.maxScrollY;
                        } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                            pullUpEl.className = '';
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                            this.maxScrollY = pullUpOffset;
                        }
                    },
                    onScrollEnd: function () {
                        if (pullDownEl.className.match('flip')) {
                            pullDownEl.className = 'loading';
                            pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';

                            refreshScrollBar();
                            pullDownAction();	// Execute custom function (ajax call?)
                        } else if (pullUpEl.className.match('flip')) {
                            pullUpEl.className = 'loading';
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
                            if (userDataSum!=0 ) {
                                pullUpAction();	// Execute custom function (ajax call?)

                            } else {
                                pullUpEl.querySelector('.pullUpLabel').innerHTML = "数据已全部加载完毕！";
                            }
                        }
                    }
                });

                setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
            }

            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

            document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

            function GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                return (r != null && r.length >= 2) ? decodeURI(r[2]) : null;
            }

            getData(ajaxIndex, stepLength);

            function getData(index, pagesize) {
                var type = $("#hiddenType").val();
                $.ajax({
                    type: "get",
                    url: "@(ViewBag.DomainUrl + "/UserCenter/GetMyfootHistory")" + "?index=" + index + "&pagesize="+pagesize,
                    dataType: "json",
                    success: function (data) {
                        userDataSum = data.Data.length;
                        var datas = "";
                        if (userDataSum != 0) {
                            ajaxIndex++;
                        }
                            for (var i = 0; i < data.Data.length; i++) {
                                datas = datas + BuildDIViitem(data.Data[i]);
                        }

                            $("#thelist").append(datas);
                    }
                })
            }




            function BuildDIViitem(data) {
                var div =  '<div class="sp_pr">'+
                    '<a href="/shop/ProductDetail?productId='+data.ProductID+'">'+
                    '<img src="' + data.IMGDomain+"/"+data.ThumbnailUrl1+'">'+
                    '<div style="width: 100%;">'+
                    '<p class="textover">' + data.ProductName + '</p>' +
                        '<div class="xing">'+
                    '<p class="textover">' +"浏览于："+ data.CreateTimeStr + '</p>' +
                        '</div>'+
                        '<div style="height:2rem;" class="xing">'+
                            '<span class="divmoney">￥<em>'+data.SalePrice+'</em></span>'+

                        '</div>'+
                    '</div>'+
                '</a>'+
            '</div>';
                return div;
            }
    </script>
 